<template>
  <Layout>

    <Form ref="form1" :model="form1" :label-width="120">
      <Row class="query-form" style="padding-top: 15px">
        <Col span="8">
          <FormItem label="专家姓名：">
            <Input class="query-form-el" type="text" v-model="form1.userName"/>
          </FormItem>
        </Col>
        <Col span="16">
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
    </Form>

    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据！" :loading="buttonLoading" size="small"
           border :columns="columns1" :data="dataTable">
    </Table>

    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>

    <Form v-if="isLeader == 0" ref="form2" :model="form2" :label-width="120">
      <Row class="query-form" style="padding-top: 15px">
        <Col span="23">
          <FormItem label="已选择人员：">
            <TagInput ref="refTagInput" :tags="selectUsers"/>
          </FormItem>
        </Col>
        <Col span="23">
          <Button class='ivu-btn-save' @click="closeModal">确定</Button>
        </Col>
      </Row>
    </Form>
  </layout>
</template>

<script>
import {Api} from '@/api/index.js'
import TagInput from "@/components/TagInput.vue"
import {sessionStorage} from '@/common/cacheUtils.js';

export default {
  components: {
    TagInput
  },
  props: {
    selectUsers: {
      type: Array
    },
      envType:{
          type: Boolean,
          default: false//false默认安全审计专家、true环保审计专家
      }
  },
  data() {
    return {
      isLeader: 0,
      form1: {
        userName: ''
      },
      //selectUsers:[],
      form2: {
        members: '',
        membersId: '',
        membersUserId: ''
      },
      //分页参数
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {
          minWidth: 100,
          title: '姓名',
          key: 'userName',
          align: 'center',
        },
        {
          minWidth: 100,
          title: '员工编号',
          key: 'loginId',
          align: 'center',
        },
        {
          minWidth: 250,
          title: '所属二级集团',
          key: 'twoLevelOrgName',
          align: 'center'
        },
        {
          minWidth: 250,
          title: '所在单位',
          key: 'expertOrgName',
          align: 'center'
        },

        {
          minWidth: 80,
          title: '性别',
          key: 'expertGender',
          align: 'center'
        },
        {
          minWidth: 150,
          title: '联系方式',
          key: 'mobileNumber',
          align: 'center'
        },

        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px',
                },
                on: {
                  click: () => {
                    this.save(params.row);
                  }
                }
              }, '选择'),
            ]);
          }
        }
      ],
      buttonLoading: false, tableHeight: 450,
      dataTable: [],
      columns2: [
        {
          type: 'index',
          title: '序号',
          minWidth: 80,
          align: 'center',
        },
        {
          minWidth: 100,
          title: '姓名',
          key: 'userName',
          align: 'center',
        },

        {
          minWidth: 150,
          title: '所在部门',
          key: 'expertOrgName',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px',
                  color: red
                },
                on: {
                  click: () => {
                    this.save(params.row);
                  }
                }
              }, '删除'),
            ]);
          }
        }
      ],
    }
  },
  mounted: function () {
    this.tableHeight = window.innerHeight - 420;
    this.query();
  },
  methods: {
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },

    copyArray(arr) {
      return JSON.parse(JSON.stringify(arr));
    },


    save(row) {
      if (this.isLeader == 0) {
        let name = row.userName
        let expertId = row.expertId
        let userId = row.userId

        let userInfo = {name, expertId, userId}
        let exist = false

        this.selectUsers.forEach(v => {
          if (v.userId == userId) {
            exist = true
          }
        })

        if (!exist) {
          this.selectUsers.push(userInfo)
        }

        // let str = this.form2.members
        // if(str && str.indexOf(name) == -1){
        //     this.form2.members = str +"," + name
        //     this.form2.membersId = this.form2.membersId +"," + expertId
        //     this.form2.membersUserId = this.form2.membersUserId +"," + userId
        // }else if(!str){
        //     this.form2.members = name
        //     this.form2.membersId = expertId
        //     this.form2.membersUserId = userId
        // }
      } else {
        this.$emit('getActivityData', row);
      }
    },

    closeModal() {
      let membersId = []
      let members = []
      let membersUserId = []
      this.selectUsers.forEach(v => {
        membersId.push(v.expertId)
        members.push(v.name)
        membersUserId.push(v.userId)
      })

      this.$emit('getActivityData', {membersId, members, membersUserId});
      this.$emit('closeModal1');
    },

    query() {
      this.buttonLoading = true
      let orgId = sessionStorage('userId').getObject('userId').orgInfo.orgId;

      let data = {
        currentPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
        orgId: orgId
      }

      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
      data.userName = this.form1.userName || ''
      let url = this.envType?Api.adtExpertList.replace('/adtexpert','/env/adtexpert'):Api.adtExpertList;
      this.$http.get(url, {params: data}).then((res) => {
        this.dataTable = res.data.data;
        this.pagedata.total = res.data.totalSize;
        this.buttonLoading = false
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    reset() {
      this.form1.userName = ''
      this.query()
    },
  }

}
</script>
